<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '场地详情',
  },
}
</route>

<template>
  <view relative h-screen>
    <view flex-auto overflow="auto">
      <view mt ml mr>
        <image :src="detailInfo.posterUrl" mode="widthFix" :style="{ width: '686rpx' }" />
      </view>
      <view ml mr>
        <uv-text :text="`场地编号：${detailInfo.code}`"></uv-text>
        <uv-text :text="`场地名称：${detailInfo.name}`"></uv-text>
        <uv-text :text="`场地描述：${detailInfo.description}`"></uv-text>
        <uv-text :text="`开放时间：${detailInfo.openedAt}`"></uv-text>
        <uv-text :text="`开放时间：${detailInfo.closedAt}`"></uv-text>
        <uv-text :text="`场地价格：${detailInfo.price} 元/小时`"></uv-text>
        <view flex w-8.5em>
          <uv-text text="场地状态："></uv-text>
          <view flex inline>
            <uv-tags :text="statusText" type="primary"></uv-tags>
          </view>
        </view>
      </view>
    </view>
    <view flex absolute class="bottom border-top" h-16 w-full>
      <view ml-4 center flex flex-col>
        <view>
          <uv-text :text="`开始时间：${startTime}`" @click="setStartTime"></uv-text>
          <uv-datetime-picker
            ref="startTimePicker"
            v-model="startTime"
            mode="time"
            :filter="filter"
            :min-hour="Number(detailInfo.openedAt.substr(0, 2))"
            :max-hour="Number(detailInfo.closedAt.substr(0, 2))"
            @confirm="confirmStartTime"
          ></uv-datetime-picker>
        </view>
        <view mt-1>
          <uv-text :text="`结束时间：${endTime}`" @click="setEndTime"></uv-text>
          <uv-datetime-picker
            ref="endTimePicker"
            v-model="endTime"
            mode="time"
            :filter="filter"
            :min-hour="Number(detailInfo.openedAt.substr(0, 2))"
            :max-hour="Number(detailInfo.closedAt.substr(0, 2))"
            @confirm="confirmEndTime"
          ></uv-datetime-picker>
        </view>
      </view>
      <view ml-auto mr-2 center flex-inline>
        <uv-text :text="`${cost} 元`"></uv-text>
      </view>
      <view center mr-4 flex-inline>
        <uv-button :text="`预约`" @click="doReservation"></uv-button>
      </view>
    </view>

    <uv-modal
      ref="modal"
      title="模拟支付"
      content="支付成功？"
      show-cancel-button
      cancel-text="失败"
      confirm-text="成功"
      @cancel="onPayFail"
      @confirm="onPaySuccess"
    >
      <uv-input v-model="paySuccess.realAmount" placeholder="实际支付金额"></uv-input>
    </uv-modal>
  </view>
</template>

<script setup lang="ts">
import { getFieldDetail, postReservation } from '@/service/reservation/reservation'
import type { VenueSearchVO, ReservationCmd } from '@/service/reservation/type'
import { showSuccess, showWarning } from '@/utils/toast'
import { notifyPaySuccess } from '@/service/notify/notify'
import type { PaySuccessCmd } from '@/service/notify/type'

onLoad(async (params) => {
  id.value = params?.id
  console.log(id)
  await loadData()
})
const id = ref('')
const detailInfo = ref<VenueSearchVO>({
  id: '',
  type: '',
  code: '',
  name: '',
  description: '',
  posterUrl: '',
  openedAt: '',
  closedAt: '',
  price: -1,
  status: -1,
})
const statusText = ref('')
const list = reactive<string[]>(['待预定', '已预订', '使用中'])
const loadData = async () => {
  const resData = await getFieldDetail(id.value)
  if (resData.code === 0) {
    detailInfo.value = resData.data
    statusText.value = list[Number(resData.data.status)]
  }
}
const startTime = ref('00:00')
const endTime = ref('00:00')
const startTimePicker = ref<any>(null)
const endTimePicker = ref<any>(null)
const setStartTime = () => {
  startTimePicker.value.open()
}
const setEndTime = () => {
  endTimePicker.value.open()
}
const confirmStartTime = (e) => {
  if (endTime.value === '00:00') {
    return
  }
  startTime.value = e.value
  check()
  calCost()
}
const confirmEndTime = (e) => {
  endTime.value = e.value
  check()
  calCost()
}
const filter = (type, options) => {
  if (type === 'minute') {
    return options.filter((option) => option % 15 === 0)
  }
  return options
}
const check = () => {
  if (endTime.value === '00:00') {
    return
  }
  const startH = Number(startTime.value.slice(0, 2))
  const startM = Number(startTime.value.slice(3, 5))
  const endH = Number(endTime.value.slice(0, 2))
  const endM = Number(endTime.value.slice(3, 5))
  const startNumber = startH * 4 + startM / 15
  const endNumber = endH * 4 + endM / 15
  if (startNumber > endNumber) {
    showWarning('结束时间应大于开始时间')
  }
}
const count = ref(0)
const cost = ref(0.0)
const calCost = () => {
  const startH = Number(startTime.value.slice(0, 2))
  const startM = Number(startTime.value.slice(3, 5))
  const endH = Number(endTime.value.slice(0, 2))
  const endM = Number(endTime.value.slice(3, 5))
  const startNumber = startH * 4 + startM / 15
  const endNumber = endH * 4 + endM / 15
  count.value = endNumber - startNumber
  const _cost = (count.value / 4) * detailInfo.value.price
  cost.value = _cost < 0 ? 0 : _cost
}
const modal = ref<any>(null)
const doReservation = async () => {
  check()
  const cmd: ReservationCmd = {
    venueId: detailInfo.value.id,
    startedAt: `${startTime.value}:00`,
    endedAt: `${endTime.value}:00`,
    price: detailInfo.value.price,
    count: count.value,
    total: cost.value,
  }
  const resData = await postReservation(cmd)
  console.log(resData)
  if (resData.code === 0) {
    paySuccess.value.payId = resData.data
    modal.value.open()
  }
}
const paySuccess = ref<PaySuccessCmd>({
  payId: '',
  realAmount: -1,
})
const onPayFail = () => {}
const onPaySuccess = async () => {
  const resData = await notifyPaySuccess(paySuccess.value)
  if (resData.code === 0) {
    showSuccess('支付成功！')
  }
}
</script>

<style scoped lang="scss">
.bottom {
  bottom: 32rpx;
}

.border-top {
  border-top: 1px solid #cccccc7f;
}
</style>
